<template>
  <div class="MessageTemplate">
    <a-table
      bordered
      :data-source="tableData"
      :pagination="pagination"
      :custom-row="customRow"
      :columns="columns"
      :rowClassName="setRowClassName">
    >
      <template slot="createTime" slot-scope="text">
        {{ moment(text).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
    </a-table>
  </div>
</template>

<script>
  import { getColumns } from '@/api/tableColumns'
  import messageTemplateService from '@/api/messageTemplateService'
  import moment from 'moment'
export default {
  name: 'MessageTemplate',
  data () {
    return {
      tableData: [],
      columns: getColumns('messageTemplate'),
      pagination: {
        pageSize: 10,
        total: 0,
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100', '200', '500'],
        showTotal: (total) => `共${total}条数据`,
        onShowSizeChange: (current, pageSize) => {
          this.filter.pageIndex = 1
          this.filter.pageSize = pageSize
        },
        onChange: (current, pageSize) => {
          this.filter.pageIndex = current
          this.filter.pageSize = pageSize
          this.table.pagination.current = current
        }
      },
      activeIndex: -1
    }
  },
  props: {
    isEvent: {
      type: Boolean,
      default: () => false
    }
  },
  created () {
    if (this.isEvent) {
      this.columns = getColumns('messageEvent')
    }
    this.search()
  },
  methods: {
    moment,
    async search () {
      if (!this.Event) { // 消息模板
        const dada = await messageTemplateService.getMessageTemplateList()
        this.tableData = dada
      }
    },
    customRow (record, index) {
      return {
        on: {
          click: () => {
            this.activeIndex = index
          }
        }
      }
    },
    setRowClassName (record, index) {
      let className = ''
      if (this.activeIndex === index) {
        className = 'active'
      }
      return className
    }
  }
}
</script>

<style lang="less" scoped>
.MessageTemplate{
  max-height: 400px;
  overflow-y: auto;
  /deep/.active{
    td {
      background-color: rgb(230,247,255) !important;
    }
    background-color: rgb(230,247,255);
  }
}
</style>
